
/* overlay trigger */
#see {
    background:transparent url(../../../img/seeitinaction.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    margin:30px 0 0 0;
    cursor:pointer;
}

#see:hover {
    background-position:0 -44px ;
}

#see:focus {
    background-position:0 -88px ;
}


/* overlay root element */
#sheet { 
    width:800px;
    height:400px;
    position:absolute;
    font-size:11px;
    display:none;
    -webkit-box-shadow: 0 0 30px #777; 
    -moz-box-shadow: 0 0 30px #777; 	
}

/* some border radius for various elements and different browsers. CSS isn't perfect */
.rounded, #sheet input, .error { 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -o-border-radius: 5px; 
    -khtml-border-radius: 5px; 
}


/* tab pane layout */
.pane {
    padding:50px; 
    display:none;
    padding-top:350px; 
}

.description {
    font-size:11px;
    color:#555;	
    padding:10px 20px;
}

/* adjust for browsers that support range input 
input[type=range] {
	width:230px;	
	height:28px;
	background-color:#777;
	padding:0;
	margin:0;
	border:0;
}

input[type=date] {
	font-size:14px;		
}
*/

/* individual panes */
#pane1 { padding-top:50px; display:block; background:#fff url(img/form.jpg) no-repeat -20px 15px; }
#pane2 { background:#fff url(img/code.jpg) no-repeat 100px 0; padding-top:375px; }
#pane3 { background:#fff url(img/firefox.gif) no-repeat -69px -59px; }
#pane4 { background:#fff url(img/opera.gif) no-repeat -4px -47px; }
#pane5 { background:#fff url(img/ie.gif) no-repeat -71px -90px;  padding-top:255px; }

#pane5 .description {
    background-color:#fff;
    margin:-9px;
}

/* the form */
#myform {
    background-color:#777;
    background-color:rgba(0, 0, 0, 0.55);	
    padding:15px;
    padding-bottom:10px;
    width:570px;
    margin:5px 0 0 73px;
}

#myform p {
    clear:left;	
}

fieldset {
    float:left;
    margin-left:15px;
    padding:0;
    border:0;
    width:245px;
}

.last {
    margin-right:0;
}

legend {
    color:#fff;
    font-size:20px;
    text-shadow:0 1px 0 #000;
    padding:0;
    margin-bottom:-3px;
}


label {
    display:block;		
    margin:3px;
    color:#ddd;
    font-size:11px;
    text-shadow:0 1px 0 #000;
}

input {
    border:1px solid;
    border-color:#ccc #ddd #ddd #ccc;	
    padding:6px;
    background-color:rgba(255, 255, 255, 0.9);	
    font-size:15px;
    color:#555;
    text-shadow:0 1px 0 #fff;
    width:80%;
}

input:focus {
    background-color:#fff;	
    color:#000;	
}

input[required] {
    font-weight:bold;		
}

/* validation error message */
.error {
    background-color:#E8FF6D;
    padding:4px;	
    color:#000;
    -webkit-box-shadow: #000 0 0 12px; 
    -moz-box-shadow: #000 0 0 12px; 		
}

/* ..with a pure CSS arrow */
.error em {
    border:10px solid;
    border-color:#E8FF6D transparent transparent;
    bottom:-17px;
    display:block;
    height:0;
    left:10px;
    position:absolute;
    width:0;		
}

/* field with validation error */
.invalid {
    background-color:rgba(221, 233, 255, 0.898) !important;
}

/* date input */
.date {
    width:193px;	
    background:#666 none repeat scroll 0 0;
    color:#fff;
    text-shadow:0 0 1px #000;
}

.date:focus {
    background-color:#333;		
    color:#fff;
}

/* datepicker trigger element */
.picktrigger {
    background:#333;
    cursor:pointer;
    display:block;
    float:right;
    height:32px;
    width:32px;
}

.picktrigger:hover {
    background:#000;		
}

.high {
    padding:15px 0 0 15px;		
    clear:both;
}

/* override slider width from external stylesheet */
#sheet .slider {
    width:175px;
}

/* buttons */
#sheet button {
    background:#0150D1 url(img/h30.png) repeat-x 0 0;
    border:1px solid #d1ddc7;
    color:#fff;
    font-size:14px;
    font-weight:bold; 
    padding:6px 15px;
    text-align:center;
    text-decoration:none;
    text-shadow:0 1px 0 #000;
    cursor:pointer; 
    height:auto;
    outline:0;
}

#sheet button:hover {
    background-position:0 -12px;
}

#sheet button:active {
    background-position:0 -30px;
}


/* tabs */
#navi {
    background:#f4f4f4 url(img/navi.png) repeat-x 0 0;
    position:absolute;
    bottom:2px;
    height:120px;
    width:640px;
    padding:0 80px;
}

#navi a  { 
    display:block;
    float:left;
    text-align:center;
    color:#666;
    width:125px;
    cursor:pointer;
    font-size:11px;
}

#navi a:hover {
    color:#333;		
}

#navi a.current {
    background:url(img/arrow.png) no-repeat 50% 0;
    color:#000 !important;	
    cursor:default;
}

#navi span {
    display:block;
    height:85px;
    width:120px;	
    margin-top:10px;
    background:url(img/tabs.png) no-repeat 20px 5px;
}

#nav2 span { background-position:20px -95px; }
#nav3 span { background-position:20px -195px; }
#nav4 span { background-position:20px -292px; }
#nav5 span { background-position:20px -399px; }


/* make some elements sit over the mask */
.error, #calroot {
    z-index:10000;	
}

/* overlay close button */
div.close {
    right:-15px;
    top:-15px;	
}
a.close {
    background: url(/images/icons/close.png) no-repeat;
    position: absolute;
    top: 2px;
    right: 5px;
    width: 35px;
    height: 35px;
    cursor: pointer;
}
/* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;	
    min-height:150px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(../images/icons/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
/* styling for elements inside overlay */
.details {
    position:absolute;
    top:15px;
    right:15px;
    font-size:11px;
    color:#fff;
    width:150px;
}

.details h3 {
    color:#aba;
    font-size:15px;
    margin:0 0 -10px 0;
}

/* CSS3 border radius for various elements. yea - CSS isn't perfect */
.rounded, #sheet input, .error {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
}

/* validation error message */
.error {
    background-color:#E8FF6D;
    padding:4px;
    -webkit-box-shadow: #000 0 0 12px;
    -moz-box-shadow: #000 0 0 12px;
}

/* nested arrow inside error message. It's 100% CSS. No images. */
.error em {
    border:10px solid;
    border-color:#E8FF6D transparent transparent;
    bottom:-17px;
    display:block;
    height:0;
    left:10px;
    position:absolute;
    width:0;
}

/* input field that caused validation error */
.invalid {
    background-color:rgba(221, 233, 255, 0.898) !important;
}


/*==============================================*/

/* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */

/* the input field */
.date {
    border:1px solid #ccc;
    font-size:18px;
    padding:4px;
    text-align:center;
    width:194px;

    -moz-box-shadow:0 0 10px #eee inset;
    -webkit-box-shadow:0 0 10px #eee inset;
}

/* calendar root element */
#calroot {
    /* place on top of other elements. set a higher value if nessessary */
    z-index:10000;

    margin-top:-1px;
    width:198px;
    padding:2px;
    background-color:#fff;
    font-size:11px;
    border:1px solid #ccc;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    -moz-box-shadow: 0 0 15px #666;
    -webkit-box-shadow: 0 0 15px #666;  
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {  
    padding:2px 0;
    height:22px;
} 

#caltitle {
    font-size:14px;
    color:#0150D1;  
    float:left;
    text-align:center;
    width:155px;
    line-height:20px;
    text-shadow:0 1px 0 #ddd;
}

#calnext, #calprev {
    display:block;
    width:20px;
    height:20px;
    background:transparent url(prev.gif) no-repeat scroll center center;
    float:left;
    cursor:pointer;
}

#calnext {
    background-image:url(next.gif);
    float:right;
}

#calprev.caldisabled, #calnext.caldisabled {
    visibility:hidden;  
}

/* year/month selector */
#caltitle select {
    font-size:10px; 
}

/* names of the days */
#caldays {
    height:14px;
    border-bottom:1px solid #ddd;
}

#caldays span {
    display:block;
    float:left;
    width:28px;
    text-align:center;
}

/* container for weeks */
#calweeks {
    background-color:#fff;
    margin-top:4px;
}

/* single week */
.calweek {
    clear:left;
    height:22px;
}

/* single day */
.calweek a {
    display:block;
    float:left;
    width:27px;
    height:20px;
    text-decoration:none;
    font-size:11px;
    margin-left:1px;
    text-align:center;
    line-height:20px;
    color:#666;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;      
} 

/* different states */
.calweek a:hover, .calfocus {
    background-color:#ddd;
}

/* sunday */
a.calsun {
    color:red;      
}

/* offmonth day */
a.caloff {
    color:#ccc;     
}

a.caloff:hover {
    background-color:rgb(245, 245, 250);        
}


/* unselecteble day */
a.caldisabled {
    background-color:#efefef !important;
    color:#ccc  !important;
    cursor:default;
}

/* current day */
#calcurrent {
    background-color:#498CE2;
    color:#fff;
}

/* today */
#caltoday {
    background-color:#333;
    color:#fff;
}



/* slider root element */
.slider { 
    background:#3C72E6 url(../../../img/gradient/h30.png) repeat-x 0 0; 
    height:9px; 
    position:relative; 
    cursor:pointer;
    border:1px solid #333;
    width:675px;
    float:left; 
    clear:right;
    margin-top:10px;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-box-shadow:inset 0 0 8px #000;
}

/* progress bar (enabled with progress: true) */
.progress {
    height:9px; 
    background-color:#C5FF00; 
    display:none;
    opacity:0.6;
}

/* drag handle */
.handle { 
    background:#fff url(../../../img/gradient/h30.png) repeat-x 0 0; 
    height:28px;
    width:28px;
    top:-12px;
    position:absolute; 
    display:block; 
    margin-top:1px;
    border:1px solid #000;
    cursor:move;
    -moz-box-shadow:0 0 6px #000;
    -webkit-box-shadow:0 0 6px #000;
    -moz-border-radius:14px;
    -webkit-border-radius:14px; 

}

/* the input field */
.range {
    border:1px inset #ddd;
    float:left;
    font-size:20px;
    margin:0 0 0 15px;
    padding:3px 0;
    text-align:center;
    width:50px;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;      
}
